
<html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    *{ margin:0; padding:0; font-size:14px}
    #box{ width:500px; margin:100px auto}
    table,th,td{ border:1px solid #000; border-collapse:collapse}
    td,th{ width:100px; height:30px; padding:10px}
    input[type="text"]{ display:none; height:24px; width:60px; border:1px solid #ccc;}
    tbody tr td:first-child{text-align: center;}
    tfoot td{text-align: right;}
    .editBtn{ color:#666}
    .delBtn{ color:red}
    .okBtn,.cancelBtn{ display:none}
    
    .edit span{ display:none}
    .edit input[type="text"]{ display:inline-block}
    .edit .editBtn,.edit .delBtn{ display:none}
    .edit .okBtn,.edit .cancelBtn{ display:inline}
    </style>
    
    </head>
    
    <body>
    <div id="box">
        <table>
            <thead>
                <tr>
                    <th><label>全选：<input type="checkbox" id="allCheck"/></label></th>
                    <th>名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>编辑</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" class="check"/></td>
                    <td><span>张三</span><input type="text"></td>
                    <td><span>18</span><input type="text"></td>
                    <td><span>1</span><input type="text"></td>
                    <td>
                        <a href="javascript:;" class="editBtn">编辑</a>
                        <a href="javascript:;" class="okBtn">确定</a>
                        <a href="javascript:;" class="cancelBtn">取消</a>
                        <a href="javascript:;" class="delBtn">删除</a>
                    </td>
        
                </tr>
                <tr>
                    <td><input type="checkbox" class="check"/></td>
                    <td><span>李四</span><input type="text"></td>
                    <td><span>25</span><input type="text"></td>
                    <td><span>2</span><input type="text"></td>
                    <td><a href="javascript:;" class="editBtn">编辑</a>
                        <a href="javascript:;" class="okBtn">确定</a> 
                        <a href="javascript:;" class="cancelBtn">取消</a>
                        <a href="javascript:;" class="delBtn">删除</a></td>
        
                </tr>
                <tr>
                    <td><input type="checkbox" class="check"/></td>
                    <td><span>小强</span><input type="text"></td>
                    <td><span>22</span><input type="text"></td>
                    <td><span>3</span><input type="text"></td>
                    <td><a href="javascript:;" class="editBtn">编辑</a>
                        <a href="javascript:;" class="okBtn">确定</a> 
                        <a href="javascript:;" class="cancelBtn">取消</a>
                        <a href="javascript:;" class="delBtn">删除</a></td>
        
                </tr>
                <tr>
                    <td><input type="checkbox" class="check"/></td>
                    <td><span>小明</span><input type="text"></td>
                    <td><span>16</span><input type="text"></td>
                    <td><span>4</span><input type="text"></td>
                    <td><a href="javascript:;" class="editBtn">编辑</a>
                        <a href="javascript:;" class="okBtn">确定</a>
                         <a href="javascript:;" class="cancelBtn">取消</a>
                         <a href="javascript:;" class="delBtn">删除</a></td>
        
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5">总价：￥<b id="money"></b></td>
                </tr>
            </tfoot>
       </table>
    </div>
    
    <script>
    var editBtns = document.querySelectorAll('.editBtn')
    var okBtns = document.querySelectorAll('.okBtn')
    var cancelBtns = document.querySelectorAll('.cancelBtn')
    var delBtns = document.querySelectorAll('.delBtn')
    //编辑
    Array.from(editBtns).forEach(function(btn){
        btn.onclick = function () {
        //找到tr
        var tr = btn.parentNode.parentNode;
        tr.className = 'edit'
        //tr.classList.add('edit')
        //找到span
        var spans = document.querySelectorAll('span')    
        Array.from(spans).forEach(function(span){
            span.nextElementSibling.value = span.innerHTML
        })
        // for(var i = 0; i < spans.length; i++){
        //     spans[i].nextElementSibling.value = spans[i].innerHTML
        // }
          
        }
    })
    //确定
    Array.from(okBtns).forEach(function(btn){
        btn.onclick = function () {
         // 找到tr，把class移出掉
        // 把input的value值赋给对应span的innerHTML
        var tr = btn.parentNode.parentNode;
        tr.className = ""
        var spans = document.querySelectorAll('span')
        Array.from(spans).forEach(function(span){
            span.innerHTML = span.nextElementSibling.value
        })
      Array.from(checks).forEach(function(btn){
          if(btn.checked){
            allmoney = tr.children[2].children[0].innerHTML * 
            tr.children[3].children[0].innerHTML
          } 
          money.innerHTML = allmoney
      })
        }
    })
    //取消
    Array.from(cancelBtns).forEach(function(btn){
        btn.onclick = function () {
        var tr = btn.parentNode.parentNode
        tr.className = ''
        }
    })

    //删除
    Array.from(delBtns).forEach(function(btn){
        btn.onclick = function () {
        var tr = btn.parentNode.parentNode
        if(confirm('确定删除？')){
        tr.remove()
        }
       //判断删除的是不是选中的tr
       if (tr.children[0].children[0].checked){
        
        allmoney -= tr.children[2].children[0].innerHTML * 
        tr.children[3].children[0].innerHTML   
       }
       if(checks = 0){
        allmoney = 0; 
        // all.checked = false 
       }  
       money.innerHTML = allmoney
        }
    })



    //全选
    var all = document.querySelector('#allCheck')
    var checks = document.querySelectorAll('.check')
    var money = document.querySelector('#money')
    console.log(checks)

    var n= 0
    var allmoney = 0

    all.onchange = function () {
        for(var i = 0; i < checks.length; i++){
            checks[i].checked = this.checked
        }
        n = this.checked ? checks.length : 0
        
        // all.checked = this.checked ? true : false
        allmoney = 0
        Array.from(checks).forEach(function(btn){
        var tr = btn.parentNode.parentNode
        all.checked?  allmoney += tr.children[2].children[0].innerHTML * 
        tr.children[3].children[0].innerHTML : 0
        })
        money.innerHTML = allmoney
    }

   //单选
    Array.from(checks).forEach(function (check) {
       check.onchange = function () {
           this.checked ? n++ : n--
           all.checked = n === checks.length  
      
        var tr = check.parentNode.parentNode
        this.checked ? allmoney += tr.children[2].children[0].innerHTML * 
        tr.children[3].children[0].innerHTML : 
        allmoney -= tr.children[2].children[0].innerHTML * 
        tr.children[3].children[0].innerHTML    
        money.innerHTML = allmoney;
       }
    })
    </script>
    </body>
    </html>
    